<!--
 * @Author: 梁 卓
 * @Version: V1.0.0
 * @Date: 2024-09-24 22:54:42
 * @LastEditors: 梁 卓
 * @LastEditTime: 2024-10-09 23:38:44
 * @FilePath: index.vue
 * Copyright 2024 Marvin, All Rights Reserved. 
 * 2024-09-24 22:54:42
 * @Description: 
-->
<template>
    <div class="chat">
        <h3 align="center">{{fname}}</h3>
        <el-scrollbar ref="scrollbarRef">
            <div class="chat-list" v-for="(item,index) in arr.list" :key="index">
                            <div :class="[item.from == query.to ? 'chat-list-left':'chat-list-right']">
                                <img :src="item.image" class="list-img">
                                <div :class="item.from == query.to?'left-msg':'right-msg'">{{item.content}}</div>
                            </div>
            </div>
        </el-scrollbar>
        <div class="chat-boom">
            <el-input
                    class="textarea"
                    type="textarea"
                    :rows="7"
                    placeholder="Please input"
                    v-model="text"
            />
            <el-button type="primary" @click="call">视频通话</el-button>
            <el-button type="primary" @click="send">发送</el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
    import { ref, onMounted, reactive, onBeforeUnmount } from 'vue/dist/vue.esm-bundler.js'
    import { useRoute,useRouter, onBeforeRouteUpdate } from 'vue-router'
    import {list,addMessage} from "../../api/message";
    import { websocketStore } from "../../store/websokcet.js";
    import socket from "../../utils/websocket";
    import { ElScrollbar } from 'element-plus';


    let route = useRoute()
    const router = useRouter();
    const scrollbarRef = ref<InstanceType<typeof ElScrollbar>>()
    const innerRef = ref<HTMLDivElement>()

    const query = reactive({to:'',pageNum:1,pageSize:10})
    let uid = ref('')
    let total = ref('');
    let arr = reactive({list:[]});
    let text = ref('');
    const fname = ref('');
    const web = websocketStore();
    

    /**
     * 获取当前路由信息
     */
    onBeforeRouteUpdate((to)=>{
        uid.value = to.query.uid
        query.to = to.query.uid
        fname.value = to.query.username
        getlist();
    })

    /**
     * 钩子函数
     */
    onMounted(() => {
        getUid()
        loginWebsocket()
    })


    web.$subscribe((mutations, state) => {
       let msg = JSON.parse(state.msg);
       if (msg.type == 'message'){
           getlist();
       }
    });


    const loginWebsocket = ()=>{
        Promise.resolve().then(()=>{
            socket.init()
        }).then(()=>{
            socket.send({
                uid: localStorage.getItem("im-userid"),
                type: 'login'
            })
        })
    }

    /**
     * 发送消息
     */
    const send = () => {
        addMessage({
            to: query.to,
            content: text.value
        })
        .then(res => {
            getlist();
        }).then(()=>{
            socket.send({
                from: localStorage.getItem("im-userid"),
                to: query.to,
                message: text.value,
                type: 'message'
            })
        })
    }
    const call = ()=>{
         // type 1 为开始请求通话  2 为回应通话
        router.push({
            path: "call",
            query: {
                from: query.to,
                type: 1
            }
        })
    }

    const getUid = ()=>{
        query.to = route.query.uid
        fname.value = route.query.username
        getlist();
    }

    const getlist = ()=>{
        list(query).then(res=>{
            arr.list = res.data;
            scrollbarRef.value!.setScrollTop(2200000)
        })
    }

</script>

<style scoped>
    .chat{
        background: rgb(247,247,247);
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .chat-boom{
        display: flex;
        justify-content: space-between;
        align-items: end;
    }
    .list-img{
        width: 40px;
        height: 40px;
        border-radius: 5px;
    }
    .chat-list{
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .chat-list-left{
        padding: 20px;
        display: flex;
        flex-direction: row;
    }
    .chat-list-right{
        padding: 20px;
        display: flex;
        flex-direction: row-reverse;
    }
    .left-msg{
        margin-left: 5px;
        background-color: #ffffff;
        font-size: 15px;
        border-radius: 6px;
        max-width: 200px;
        word-wrap:break-word
    }
    .right-msg{
        margin-right: 7px;
        background-color: #ffffff;
        font-size: 15px;
        border-radius: 6px;
        max-width: 200px;
        word-wrap:break-word
    }
</style>
